const TILES_MAP = require("TileMap");

cc.Class({
    extends: cc.Component,

    properties: {
        tileAtlas : cc.SpriteAtlas,
        backAtlas : cc.SpriteAtlas,
        _selected : false,
        cover : cc.Node,
        MJId : {
            default : "",
            serializable : false,
            visible : false
        },
        MJIndex : {
            default : -1,
            serializable : false,
            visible : false
        },
        moFlag : {
            default : false,
            serializable : false,
            visible : false
        },
        selected : {
            get : function () {
                return this._selected;
            },
            set : function (val) {
                this._selected = val;
                if(val == true){
                    this.node.x = this.originPosition.x;
                    this.node.y = 40;
                    // console.log(this.node.zIndex);
                    this.node.zIndex = 1;
                }else{
                    this.node.zIndex = 0;
                    this.node.position = this.originPosition;
                }
            },
            visible : false
        },
        originPosition : {
            default : null,
            visible : false
        }
        // foo: {
        //    default: null,      // The default value will be used only when the component attaching
        //                           to a node for the first time
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: 'Foo', // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...
    },

    // use this for initialization
    onLoad: function () {
        this.node.on(cc.Node.EventType.TOUCH_START, function () {}, this);
        this.node.on(cc.Node.EventType.TOUCH_MOVE, function () {}, this);
        this.node.on(cc.Node.EventType.TOUCH_END, function () {}, this);
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, function () {}, this);
        
        // this.MJIndex = -1;
        // this.MJId = null;
        // this.moFlag = false;

        // this._selected = false;
        // this.originPosition = null;
    },

    init : function (index, moFlag, MJId, cancelAnimation) {
        this.MJIndex = index;
        this.MJId = MJId;
        var endPos = null;

        this.moFlag = moFlag;
        if(moFlag){
            endPos = cc.p(index * 85 + 20, 0);
            this.node.position = endPos.add(cc.p(0, 45));
            this.node.opacity = 0;

            var action = cc.spawn(
                cc.moveTo(0.5, endPos).easing(cc.easeBounceOut()),
                cc.fadeTo(0.3, 255)
            );
            this.node.runAction(action);
        }else{
            endPos = cc.p(index * 85, 0);
            if(cancelAnimation){
                this.node.position = endPos;
            }else{
                this.node.opacity = 0;
                this.node.position = endPos.add(cc.p(0, 45));
    
                setTimeout(function () {
                    var action = cc.spawn(
                        cc.moveTo(0.3, endPos),//.easing(cc.easeCircleActionIn()),
                        cc.fadeTo(0.3, 255)
                    );
                    this.node.runAction(action);
                }.bind(this), 400 * Math.floor(index / 4));
            }
        }

        this.node.getComponent(cc.Sprite).spriteFrame = this.tileAtlas.getSpriteFrame(TILES_MAP[MJId]);
        
        this.originPosition = endPos;
    },
    
    move : function (direction, cancelMoFlag, cancelAnimation) {
        if(cancelMoFlag){
            this.node.x -= 20;
            this.moFlag = false;
        }
        this.MJIndex += direction;

        if(Math.abs(direction) > 1){
            this.node.x = this.node.x + direction * 85;
            this.originPosition = this.node.position;
        }else{
            if(cancelAnimation){
                this.node.x = this.node.x + direction * 85;
                this.originPosition = this.node.position;
            }else{
                this.originPosition.x = this.node.x + direction * 85;
                this.node.runAction(cc.moveTo(0.3, this.originPosition));
            }
        }
    },

    change : function () {
        this.moFlag = true;
        this.node.x += 20;
        this.originPosition = this.node.position;
    },
    
    exchange : function (position) {
        var action = null;
        var totalDistance = Math.abs(this.node.x - position.x);
        if(totalDistance > this.node.width * 2){
            action = cc.sequence(
                cc.moveTo(0.1, this.node.x, this.node.height + this.node.y),
                cc.moveTo(0.05 * totalDistance / this.node.width, position.x, this.node.height + this.node.y),
                cc.moveTo(0.1, position.x, position.y)
            );
        }else{
            action = cc.moveTo(0.3, position);
        }
        // this.node.position = position;
        this.originPosition = position;
        this.node.runAction(action);
    },

    showCover : function () {
        this.cover.active = true;
    }
});
